<template>
  <div class="l-echart-pie" :style="styleSizeName" @click="handleClick">
    <div
      class="l-echart-pie-title"
      v-html="titleFormatter && titleFormatter(dataChart)"
    ></div>
    <div :ref="id" :style="styleChartName"></div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
  mixins: [init],
  computed: {
    labelShow() {
      return this.$vaildData(this.option.labelShow, false);
    },
    x2() {
      return this.option.gridX2 || 20;
    },
    fontSize() {
      return this.option.labelShowFontSize || 14;
    },
    legendSet() {
      let legend = this.getLegendPosition(
        this.option.legendPostion,
        this.option.legendPadding
      );
      return legend;
    },
  },
  methods: {
    updateChart() {
      const optionData = this.$deepClone(this.dataChart) || [];
      const option = {
        title: this.ishasprop(
          this.option.titleShow,
          {
            text: this.option.title,
            subtext: this.option.subtext || "",
            textStyle: {
              color: this.option.titleColor || "#333",
              fontSize: this.option.titleFontSize || 16,
            },
            left: this.option.titlePostion || "auto",
            subtextStyle: {
              color: this.option.subTitleColor || "#aaa",
              fontSize: this.option.subTitleFontSize || 14,
            },
          },
          {}
        ),
        tooltip: (() => {
          return Object.assign(
            (() => {
              if (this.formatter) {
                return {
                  formatter: (name) => {
                    return this.formatter(name, this.dataChart);
                  },
                };
              }
              return {};
            })(),
            {
              backgroundColor:
                this.option.tipBackgroundColor || "rgba(50,50,50,0.7)",
              borderWidth: "0",
              textStyle: {
                fontSize: this.option.tipFontSize,
                color: this.option.tipColor || "#fff",
              },
            }
          );
        })(),
        grid: {
          show: this.option.gridShow,
          left: this.option.gridX || 20,
          top: this.option.gridY || 60,
          right: this.x2,
          bottom: this.option.gridY2 || 60,
        },
        legend: {
          show: this.$vaildData(this.option.legend, false),
          orient: this.option.legendOrient || "horizontal",
          left: this.legendSet.left,
          top: this.legendSet.top,
          padding: this.legendSet.padding || 5,
          textStyle: {
            color: this.option.legendColor || "#999",
            fontSize: this.option.legendFontSize || 12,
          },
          width: this.option.legendWidthAuto
            ? "auto"
            : this.option.legendWidth || "auto",
          itemWidth: this.option.legendItemWidth,
          itemheight: this.option.legendItemHeight,
          icon: this.option.legendItemIcon,
          data: (() => {
            return optionData.map((ele, index) => {
              return {
                name: this.dataType === 2 ? ele[this.labelKey] : ele.name,
                textStyle: this.ishasprop(
                  !this.switchTheme,
                  {
                    color: this.getColor(index, true),
                  },
                  {}
                ),
              };
            });
          })(),
        },
        series: (() => {
          // const barColor = this.option.barColor || [];
          const list = [
            {
              type: "pie",
              roseType: this.option.roseType || '',
              radius: this.option.radius ? [`${this.$vaildData(this.option.radiusN, 50)}%`, `${this.$vaildData(this.option.radiusW, 70)}%`] : "50%",
              center: [`${this.$vaildData(this.option.centerH, 50)}%`, `${this.$vaildData(this.option.centerV, 60)}%`],
              animationType: "scale",
              animationEasing: "elasticOut",
              selectedMode: this.$vaildData(this.option.selectedMode, ''),
              animationDelay: function () {
                return Math.random() * 200;
              },
              label: {
                show: this.$vaildData(this.option.labelShow, false), //开启显示
                position: this.option.labelPosition || "top", //在上方/右方显示,
                formatter: this.labelFormatter2(
                  this.option.labelFormatterType,
                  this.option.labelFormatter
                ), // name => this.getLabelFormatter(name)
                textStyle: {
                  //数值样式
                  fontSize: this.option.labelShowFontSize || 14,
                  color: this.option.labelShowColor || "#333",
                  fontWeight: this.option.labelShowFontWeight || "normal",
                },
              },
              data: (() => {
                let list = optionData;
                if (this.dataType === 2) {
                  if (this.labelKey && this.valueKey) {
                    const serieData = [];
                    list.forEach((t) => {
                      serieData.push({
                        name: t[this.labelKey],
                        value: t[this.valueKey],
                        list: list,
                      });
                    });
                    return serieData;
                  }
                }
                if (this.option.notCount) {
                  list = list.filter((ele) => {
                    if (ele.value !== 0 && ele.value) {
                      return true;
                    }
                  });
                }
                if (this.option.sort) {
                  list.sort(function (a, b) {
                    return a.value - b.value;
                  });
                }
                if (this.option.selectedMode && this.$vaildData(this.option.selectedModeNum)) {
                  list.forEach((t,i)=>{
                    if (i== this.option.selectedModeNum) {
                      t.seleted = true
                    }
                  })
                }
                return list;
              })(),
              itemStyle: this.ishasprop(
                !this.switchTheme,
                {
                  color: (params) => this.getColor(params.dataIndex),
                },
                {
                  emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                  borderRadius:  this.option.borderRadius || 0,
                },
              ),
            },
          ];
          return list;
        })(),
      };
      console.log(JSON.stringify(option));
      this.myChart.resize();
      this.myChart.setOption(option, true);
    },
    handleClick() {
      this.clickFormatter &&
        this.clickFormatter(
          {
            data: this.dataChart,
          },
          this.getItemRefs()
        );
    },
  },
};
</script>



